<template>
  <div class=app-container>
    <el-tabs v-model="postForm.type" type="card" @tab-click="handleClick">
      <el-tab-pane label="业务服务器" name="LOCAL">业务服务器</el-tab-pane>
      <el-tab-pane label="阿里云服务器" name="ALIYUN">阿里云服务器</el-tab-pane>
    </el-tabs>
    <el-form ref=form :model=postForm label-width=120px>
      <el-row v-if=" postForm.type === 'ALIYUN' ">
        <el-row>
          <el-col :span=12>
            <el-form-item label="访问密钥ID">
              <el-input v-model=postForm.aliyunAccessKeyId placeholder=AccessKeyId></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="访问密钥Secret">
              <el-input v-model=postForm.aliyunAccessKeySecret placeholder=AccessKeySecret></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span=12>
            <el-form-item label="存储空间(BucketName)">
              <el-input v-model=postForm.aliyunBucketName placeholder=BucketName></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label=绑定的域名>
              <el-input v-model=postForm.aliyunDomain placeholder=绑定的域名></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span=12>
            <el-form-item label="访问域名(EndPoint)">
              <el-input v-model=postForm.aliyunEndPoint placeholder=EndPoint></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label=路径前缀>
              <el-input v-model=postForm.aliyunPrefix placeholder=路径前缀></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-row v-if=" postForm.type === 'QINIU' ">
        <el-row>
          <el-col :span=12>
            <el-form-item label=AccessKey>
              <el-input v-model=postForm.qiniuAccessKey placeholder=AccessKey></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label=SecretKey>
              <el-input v-model=postForm.qiniuSecretKey placeholder=SecretKey></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span=12>
            <el-form-item label=空间名>
              <el-input v-model=postForm.qiniuBucketName placeholder=空间名></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label=绑定的域名>
              <el-input v-model=postForm.qiniuDomain placeholder=绑定的域名></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label=路径前缀>
              <el-input v-model=postForm.qiniuPrefix placeholder=路径前缀></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { get as config, put as saveConfig } from '@/api/sys/connSysAuthApi'

  const defaultForm = {
    aliyunAccessKeyId: undefined,
    aliyunAccessKeySecret: undefined,
    aliyunBucketName: undefined,
    aliyunDomain: undefined,
    aliyunEndPoint: undefined,
    aliyunPrefix: undefined,
    localPrefix: undefined,
    qcloudAppId: 0,
    qcloudBucketName: undefined,
    qcloudDomain: undefined,
    qcloudPrefix: undefined,
    qcloudRegion: undefined,
    qcloudSecretId: undefined,
    qcloudSecretKey: undefined,
    qiniuAccessKey: undefined,
    qiniuBucketName: undefined,
    qiniuDomain: undefined,
    qiniuPrefix: undefined,
    qiniuSecretKey: undefined,
    type: 'LOCAL'
  }

  export default {
    data() {
      const validateRequire = (rule, value, callback) => {
        if (!value || value.length === 0) {
          callback(new Error('必填'))
        } else {
          callback()
        }
      }
      return {
        module: 'file',
        postForm: Object.assign({}, defaultForm),
        listLoading: false,
        rules: {
          name: [{ validator: validateRequire }],
          userType: [{ validator: validateRequire }]
        }
      }
    },
    created() {
      this.getSite()
    },
    methods: {
      getSite() {
        this.listLoading = true
        config(this.module + '/config').then(res => {
          if (res.data) {
            this.postForm = res.data
          }
          this.listLoading = false
        })
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      onSubmit() {
        saveConfig(this.module + '/config', this.postForm).then(res => {
          let type = 'success'
          if (res.code !== 200) {
            type = 'error'
          }
          this.$notify({
            title: '提示!',
            message: res.message,
            type,
            duration: 2000
          })
        })
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>

